<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 该模板由编程导航整理，部分素材可能源于网上，侵删，作者微信 code_nav，公众号『 编程导航 』 -->
  <title>编程导航 - Saber Lily</title>
  <meta name="description" content="编程导航,最专业的程序员导航网站,发现优质编程学习资源,定制你的程序员必备主页" />
  <meta name="keywords" content="编程,程序员,导航,资源,主页,编程导航" />
  <title>Test</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
      background-image: url('images/1.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    canvas {
      padding: 0;
      margin: 0;
    }

    div.btnbg {
      position: fixed;
      left: 0;
      top: 0;
    }
  </style>
</head>


<body>

<canvas id="sakura"></canvas>

<div class="btnbg"></div>

<script src="js/main.js"></script>
<script src="js/sylvester.js" type="text/javascript"></script>
<script src="js/glUtils.js" type="text/javascript"></script>
<!-- sakura shader -->
<script id="sakura_point_vsh" type="x-shader/x_vertex">
	uniform mat4 uProjection;
	uniform mat4 uModelview;
	uniform vec3 uResolution;
	uniform vec3 uOffset;
	uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
	uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start


	attribute vec3 aPosition;
	attribute vec3 aEuler;
	attribute vec2 aMisc; //x:size, y:fade

	varying vec3 pposition;
	varying float psize;
	varying float palpha;
	varying float pdist;

	//varying mat3 rotMat;
	varying vec3 normX;
	varying vec3 normY;
	varying vec3 normZ;
	varying vec3 normal;

	varying float diffuse;
	varying float specular;
	varying float rstop;
	varying float distancefade;


	void main(void) {
	    // Projection is based on vertical angle
	    vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
	    gl_Position = uProjection * pos;
	    gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;

	    pposition = pos.xyz;
	    psize = aMisc.x;
	    pdist = length(pos.xyz);

	    palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);

	    vec3 elrsn = sin(aEuler);
	    vec3 elrcs = cos(aEuler);
	    mat3 rotx = mat3(
	        1.0, 0.0, 0.0,
	        0.0, elrcs.x, elrsn.x,
	        0.0, -elrsn.x, elrcs.x
	    );
	    mat3 roty = mat3(
	        elrcs.y, 0.0, -elrsn.y,
	        0.0, 1.0, 0.0,
	        elrsn.y, 0.0, elrcs.y
	    );
	    mat3 rotz = mat3(
	        elrcs.z, elrsn.z, 0.0,
	        -elrsn.z, elrcs.z, 0.0,
	        0.0, 0.0, 1.0
	    );
	    mat3 rotmat = rotx * roty * rotz;
	    normal = rotmat[2];

	    mat3 trrotm = mat3(
	        rotmat[0][0], rotmat[1][0], rotmat[2][0],
	        rotmat[0][1], rotmat[1][1], rotmat[2][1],
	        rotmat[0][2], rotmat[1][2], rotmat[2][2]
	    );
	    normX = trrotm[0];
	    normY = trrotm[1];
	    normZ = trrotm[2];

	    const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);

	    float tmpdfs = dot(lit, normal);
	    if(tmpdfs < 0.0) {
	        normal = -normal;
	        tmpdfs = dot(lit, normal);
	    }
	    diffuse = 0.4 + tmpdfs;

	    vec3 eyev = normalize(-pos.xyz);
	    if(dot(eyev, normal) > 0.0) {
	        vec3 hv = normalize(eyev + lit);
	        specular = pow(max(dot(hv, normal), 0.0), 20.0);
	    }
	    else {
	        specular = 0.0;
	    }

	    rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
	    rstop = pow(rstop, 0.5);
	    //-0.69315 = ln(0.5)
	    distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
	}



</script>
<script id="sakura_point_fsh" type="x-shader/x_fragment">
	#ifdef GL_ES
	//precision mediump float;
	precision highp float;
	#endif

	uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
	uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start

	const vec3 fadeCol = vec3(0.08, 0.03, 0.06);

	varying vec3 pposition;
	varying float psize;
	varying float palpha;
	varying float pdist;

	//varying mat3 rotMat;
	varying vec3 normX;
	varying vec3 normY;
	varying vec3 normZ;
	varying vec3 normal;

	varying float diffuse;
	varying float specular;
	varying float rstop;
	varying float distancefade;

	float ellipse(vec2 p, vec2 o, vec2 r) {
	    vec2 lp = (p - o) / r;
	    return length(lp) - 1.0;
	}

	void main(void) {
	    vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
	    vec3 d = vec3(0.0, 0.0, -1.0);
	    float nd = normZ.z; //dot(-normZ, d);
	    if(abs(nd) < 0.0001) discard;

	    float np = dot(normZ, p);
	    vec3 tp = p + d * np / nd;
	    vec2 coord = vec2(dot(normX, tp), dot(normY, tp));

	    //angle = 15 degree
	    const float flwrsn = 0.258819045102521;
	    const float flwrcs = 0.965925826289068;
	    mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
	    vec2 flwrp = vec2(-abs(coord.x-0.2), coord.y) * flwrm;

	    float r;
	    if(flwrp.x < 0.0) {
	        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.6, 0.96) * 0.5);//0.36
	    }
	    else {
	        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
	    }

	    if(r > rstop) discard;

	    vec3 col = vec3(1,1,1);//mix(vec3(1.0, 0.6, 0.9), vec3(1.0, 0.9, 0.8), r); flower's color
	    float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
	    col *= vec3(1.0, grady, grady);
	    col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
	    col = col * diffuse + specular;

	    col = mix(fadeCol, col, distancefade);

	    float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
	    alpha = smoothstep(0.0, 1.0, alpha) * palpha;

	    if(true){
	    	gl_FragColor = vec4(col * 0.5, alpha);
	    }


	}



</script>
<!-- effects -->
<script id="fx_common_vsh" type="x-shader/x_vertex">
	uniform vec3 uResolution;
	attribute vec2 aPosition;

	varying vec2 texCoord;
	varying vec2 screenCoord;

	void main(void) {
	    gl_Position = vec4(aPosition, 0.0, 1.0);
	    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
	    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
	}



</script>
<script id="bg_fsh" type="x-shader/x_fragment">
	#ifdef GL_ES
	//precision mediump float;
	precision highp float;
	#endif

	uniform vec2 uTimes;

	varying vec2 texCoord;
	varying vec2 screenCoord;

	void main(void) {
	    vec3 col;
	    float c;
	    vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
	    c = exp(-pow(length(tmpv) * 1.2, 2.0));
	    col = mix(vec3(0.05, 0.0, 0.03), vec3(0.96, 0.88, 1.0) * 1.5, c);
	    gl_FragColor = vec4(col * 0.5, 1.0);
	}



</script>
<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
	#ifdef GL_ES
	//precision mediump float;
	precision highp float;
	#endif
	uniform sampler2D uSrc;
	uniform vec2 uDelta;

	varying vec2 texCoord;
	varying vec2 screenCoord;

	void main(void) {
	    vec4 col = texture2D(uSrc, texCoord);
	    gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
	}



</script>
<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
	#ifdef GL_ES
	//precision mediump float;
	precision highp float;
	#endif
	uniform sampler2D uSrc;
	uniform vec2 uDelta;
	uniform vec4 uBlurDir; //dir(x, y), stride(z, w)

	varying vec2 texCoord;
	varying vec2 screenCoord;

	void main(void) {
	    vec4 col = texture2D(uSrc, texCoord);
	    col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
	    col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
	    col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
	    col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
	    gl_FragColor = col / 7.9;
	}



</script>
<!-- effect fragment shader template -->
<script id="fx_common_fsh" type="x-shader/x_fragment">
	#ifdef GL_ES
	//precision mediump float;
	precision highp float;
	#endif
	uniform sampler2D uSrc;
	uniform vec2 uDelta;

	varying vec2 texCoord;
	varying vec2 screenCoord;

	void main(void) {
	    gl_FragColor = texture2D(uSrc, texCoord);
	}



</script>
<!-- post processing -->
<script id="pp_final_vsh" type="x-shader/x_vertex">
	uniform vec3 uResolution;
	attribute vec2 aPosition;
	varying vec2 texCoord;
	varying vec2 screenCoord;
	void main(void) {
	    gl_Position = vec4(aPosition, 0.0, 1.0);
	    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
	    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
	}



</script>
<script id="pp_final_fsh" type="x-shader/x_fragment">
	#ifdef GL_ES
	//precision mediump float;
	precision highp float;
	#endif
	uniform sampler2D uSrc;
	uniform sampler2D uBloom;
	uniform vec2 uDelta;
	varying vec2 texCoord;
	varying vec2 screenCoord;
	void main(void) {
	    vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
	    vec4 bloomcol = texture2D(uBloom, texCoord);
	    vec4 col;
	    col = srccol + bloomcol * (vec4(1.0) + srccol);
	    col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
	    col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)

	    gl_FragColor = vec4(col.rgb, 0.0);
	    gl_FragColor.a = 0.0;
	}



</script>

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying highp vec2 vTextureCoord;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
  }



</script>

<script id="shader-fs" type="x-shader/x-fragment">
  varying highp vec2 vTextureCoord;

  uniform sampler2D uSampler;

  void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  }



</script>


</body>
</html>
